<template>
    <div class="task-form" v-if="show">
      <h3><i class="fas fa-plus-circle"></i> {{ editingTask ? '编辑任务' : '添加新任务' }}</h3>
      
      <div class="form-row">
        <div class="form-group">
          <label for="taskTitle">任务标题 *</label>
          <input 
            type="text" 
            id="taskTitle" 
            class="form-control" 
            placeholder="输入任务标题" 
            required
            v-model="formData.title"
          >
        </div>
        <div class="form-group">
          <label for="taskCategory">分类</label>
          <select id="taskCategory" class="form-control" v-model="formData.category">
            <option value="">选择分类</option>
            <option value="work">工作</option>
            <option value="personal">个人</option>
            <option value="shopping">购物</option>
            <option value="health">健康</option>
          </select>
        </div>
      </div>
      
      <div class="form-row">
        <div class="form-group">
          <label for="taskPriority">优先级</label>
          <select id="taskPriority" class="form-control" v-model="formData.priority">
            <option value="low">低</option>
            <option value="medium" selected>中</option>
            <option value="high">高</option>
          </select>
        </div>
        <div class="form-group">
          <label for="taskDueDate">截止日期</label>
          <input 
            type="date" 
            id="taskDueDate" 
            class="form-control"
            v-model="formData.dueDate"
          >
        </div>
      </div>
      
      <div class="form-group">
        <label for="taskDescription">任务描述</label>
        <textarea 
          id="taskDescription" 
          class="form-control" 
          rows="3" 
          placeholder="输入任务描述"
          v-model="formData.description"
        ></textarea>
      </div>
      
      <div class="form-actions">
        <button class="btn btn-outline" @click="cancel">
          取消
        </button>
        <button class="btn btn-primary" @click="saveTask">
          <i class="fas fa-save"></i> 保存任务
        </button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { ref, watch } from 'vue'
  import { useTaskStore } from '@/stores/taskStore'
  
  const taskStore = useTaskStore()
  const show = computed(() => taskStore.showTaskForm)
  const editingTask = computed(() => taskStore.editingTask)
  
  const formData = ref({
    id: null,
    title: '',
    description: '',
    category: '',
    priority: 'medium',
    dueDate: '',
    status: 'pending'
  })
  
  // 监听编辑任务的变化
  watch(() => taskStore.editingTask, (newTask) => {
    if (newTask) {
      formData.value = { ...newTask }
    } else {
      resetForm()
    }
  })
  
function saveTask() {
  if (!formData.value.title.trim()) {
    alert('请填写任务标题！')
    return
  }
  const categoryMap = {
    work: 1,
    personal: 2,
    shopping: 3,
    health: 4
  }
  const taskVO = {
    id: formData.value.id || undefined,
    title: formData.value.title.trim(),
    description: formData.value.description.trim() || '',
    status: formData.value.status,
    priority: formData.value.priority,
    categoryId: categoryMap[formData.value.category] || null, // 转换为 categoryId
    dueDate: formData.value.dueDate || undefined
  }

  if (taskVO.id) {
    taskStore.updateTask(taskVO.id, taskVO).then(() => {
    taskStore.fetchTasks() // 确保任务列表更新
    })
  } else {
    taskStore.addTask(taskVO).then(() => {
    taskStore.fetchTasks() // 确保任务列表更新
    })
  }
  taskStore.showTaskForm = false
  resetForm()
}
  
  function cancel() {
    taskStore.showTaskForm = false
    taskStore.editingTask = null
    resetForm()
  }
  
  function resetForm() {
    formData.value = {
      id: null,
      title: '',
      description: '',
      category: '',
      priority: 'medium',
      dueDate: '',
      status: 'pending'
    }
  }
  </script>
  
  <style scoped>
  .task-form {
    background: #f8fafd;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    border: 1px dashed var(--border);
  }
  
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 15px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
  }
  
  .form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    transition: border 0.2s;
  }
  
  .form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
  }
  
  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
  }
  
  @media (max-width: 900px) {
    .form-row {
      grid-template-columns: 1fr;
    }
  }
  </style>